<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<style type="text/css">
			html { height: 100% }
			body { height: 100%; margin: 0; padding: 0 }
			#map_canvas { height: 100% }
		</style>
		<script type="text/javascript"
			src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDTVD1kxDxL9qbey_mOTNcpVSUD_ocXz4w&sensor=false">
		</script>
		<script type="text/javascript">
			var map;
			var markersArray = [];
			var pointsArray = [];
			var mainLocation;

			function initialize() {
				//mainLocation = new google.maps.LatLng(49.82438113, 24.05064789);
				mainLocation = new google.maps.LatLng(0, 0);
				var mapOptions = {
					zoom: 3,
					center: mainLocation,
					mapTypeId: google.maps.MapTypeId.TERRAIN
				};
				map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
			}

			function addPoint(location) {						
				pointsArray.push(location);			
			}
			
			function delPoint() {						
				pointsArray.pop();			
			}
			
			function setPL() {
				var l_path = new google.maps.Polyline({
					path: pointsArray,
					strokeColor: "#FF0000",
					strokeOpacity: 1.0,
					strokeWeight: 2
				});
				l_path.setMap(map);
			}

			function setCenter(location) {
				//centerLocation = new google.maps.LatLng(location);
				map.setCenter(location);
			}

			function setZoom(zoom) {
				//centerLocation = new google.maps.LatLng(location);
				map.setZoom(zoom);
			}
			

		</script>
	</head>
	<body onload="initialize()">
		<div id="map_canvas" style="width:100%; height:100%"></div>
	</body>
</html>
